<template>
	<div id="news">
		<div id="slideBox" class="slideBox">
			<ul class="bd">
				<li>
					<dl>
						<dt><span>26<font>03</font></span><img src="../../../public/images/img1.jpg"/></dt>
						<dd>
							<h3>上海发布新的不良资产</h3>
							<p>上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境上海</p>
							<a href="">查看</a>
						</dd>
					</dl>
				</li>
				<li>
					<dl>
						<dt><span>26<font>03</font></span><img src="../../../public/images/img1.jpg"/></dt>
						<dd>
							<h3>上海发布新的不良资产</h3>
							<p>上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境上海</p>
							<a href="">查看</a>
						</dd>
					</dl>
				</li>
			</ul>
			<ul class="hd"></ul>
		</div>	
	</div>
</template>
<script>
	export default{
		name: "news"
	}
</script>
<style lang="less" rel="stylesheet/less" type="text/css">
	@import '../../../public/css/variable.less';
    .slideBox{
    	box-sizing: border-box;
	    padding: 70px 60px 0;
        .bd{
            .cf();
            li{
                width: 540px !important;
                float: left;
                padding: 0 40px;
                box-sizing: border-box;
            }
        }
        dl{
            .cf();
            dt{
                float: left;
                position: relative;
                width: 235px;
                height: 145px;
                margin-right: 25px;
                img{
                    width: 100%;
                    height: 100%;
                }
                span{
                    position: absolute;
                    top: -23px;
                    left: -23px;
                    display: inline-block;
                    width: 45px;
                    height: 45px;
                    background: @cgolden;
                    color: @cw;
                    .fonts(18px);
                    font-weight: 100;
                    padding: 5px;
                    box-sizing: border-box;
                    .trans(0.3s);
                    font{
                        position: absolute;
                        display: inline-block;
                        font-size: 14px;
                        width: 30px;
                        top: 25px;
                        right: -10px;
                        &:before{
                            content: "";
                            display: block;
                            .bias(40px, 40px, @color:#fff, @line_width:1px);
                                top: -14px;
                                right: 15px;
                                width: 40px;
                        }
                    }
                    &:before{
                        content: "";
                        position: absolute;
                        top: -8px;
                        left: -8px;
                        width: 45px;
                        height: 45px;
                        box-sizing: border-box;
                        border: 2px solid @cgolden;
                    }
                }
                &:hover{
                    span{
                        top: 50%;
                        left: 50%;
                        margin: -25px;
                    }
                }
            }
            dd{
                color: @cw;
                h3{
                    .fonts(16px);
                    .ellipsis();
                }
                p{
                    .spil(2);
                    .fonts(14px);
                    line-height: 26px;
                    margin: 20px 0;
                    height: 48px;
                }
                a{
                    display: inline-block;
                    .fonts(14px);
                    color: @cgolden;
                    padding: 5px 30px;
                    border: 1px solid @cgolden;
                    .bdr(5px);
                    &:hover{
                        background: @cgolden;
                        color: @cw;
                    }
                }
            }
        }
    }
    .hd{
        text-align: center;
        margin-top: 80px;
        li{
            display: inline-block;
            width: 8px;
            height: 8px;
            border: 1px solid @cw;
            margin: 0 5px;
            .fonts(0);
            .bdr(50%);
            &.on{ background: @cgolden; border-color: @cgolden; }
        }
    }
</style>